<template>
  <scroll-view class="tab-scroll-view" scroll-x :scroll-into-view="scrollIntoView">
    <view
      :id="'view' + index"
      @click="changeCurrent(index)"
      :show-scrollbar="false"
      :style="{
        borderWidth: type == 1 && current == index ? '4rpx' : '',
        minWidth: `${tabList.length > 5 ? 18.5 : 100 / tabList.length}vw`,
      }"
      :class="[current == index ? 'xx-active' : '', 'tab-item', smallFontSize ? 'small-font-size' : '', 'type' + type]"
      v-for="(item, index) in tabList"
      :key="index"
    >
      <view :class="[type == 2 && current == index ? 'type2-view-active' : '']">
        {{ item }}
      </view>
    </view>
  </scroll-view>
</template>

<script>
export default {
  props: {
    tabList: {
      type: Array,
      default: [],
    },
    current: {
      type: Number,
      default: 0,
    },
    smallFontSize: {
      type: Boolean,
      default: false,
    },
    type: {
      type: Number,
      default: 1,
    },
  },
  data() {
    return {
      scrollIntoView: "",
    };
  },
  watch: {
    current(val) {
      this.scrollIntoView = "view" + (val - 1);
    },
  },
  methods: {
    changeCurrent(index) {
      if (this.current != index) {
        this.$emit("changeCurrent", index);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.tab-scroll-view ::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.tab-scroll-view {
  width: 750rpx;
  flex-direction: row;
  white-space: nowrap;
  color: $font-grey-color;
  .tab-item {
    display: inline-block;
    box-sizing: border-box;
    text-align: center;
    border-bottom: 0rpx solid $theme-color;
    box-sizing: border-box;
  }
  .type1 {
    line-height: 84rpx;
    padding: 0 20rpx;
  }
  .type2 {
    padding: 15rpx 10rpx;
    view {
      padding: 10rpx 0;
      border-radius: 40rpx;
    }
  }
  .type2-view-active {
    background: $theme-color;
    color: #ffffff;
  }
  .small-font-size {
    font-size: $small-font-size;
  }
}
</style>
